<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新增临时培训</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>

        .blockElement {
            position: fixed !important;
            top: 50% !important;
        }

        img {
            height: 100%;
            width: 100%;
            float: left;
            margin: 10px;
            object-fit: cover;

        }

        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .table-detail td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
        }

        .pull-left {
            float: left;
            padding-left: 6px;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .td-value2 select {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
            color: #2a8cec;
        }

        .lineOne {
            text-align: left;
        }

        span {
            padding-left: 6px
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black !important;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .span-btn {
            position: absolute;
            left: 27px;
            margin-top: 0px;
            cursor: pointer;
        }

        .auditorName {
            text-align: center;
        }

        .IcoNormal {
            float: left;
            border-bottom: 0px;
            border-left: 0px;
            background-color: transparent;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            border-top: 0px;
            border-right: 0px;
            background-image: url(/dist/img/upload_normal.gif);
            background-repeat: no-repeat;
            float: left;
        }

        .progressobj {
            height: 20px;
        }

        .progressobj .delfile {
            float: left;
            margin-left: 10px;
        }

        .select {
            color: #fff;
            background-color: #045B9E;
        }

        td .sp-value {
            display: inline-block;
            padding-left: 6px;
            word-wrap: break-word;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: black;
        }

        .table-detail-payee:nth-child(even) td.td-title {
            background-color: white;
        }

        .printDiv {
            display: none;
        }

        .printInput {
            width: 200px;
        }

        .printBtn {
            margin: 0 auto;
            display: block;
        }

        #divUploadedFiles {
            /*padding: 4px;*/
            padding-bottom: 0;
        }

        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 6px;
            height: 6px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .moreListData {
            position: absolute;
            top: 30px;
            z-index: 111;
            display: none;
        }

        .moreListData .item {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .moreListData .item span {
            margin-right: 5px;
        }

        .ui_main {
            vertical-align: top;
        }

        .td20 {
            width: 20% !important;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            padding: 0 4px;
            height: 29px;
            line-height: 29px;
            margin: 0 auto;
            width: 80px;
            /*margin-top: 9px;*/
            border-radius: 4px;
            display: block;
        }

        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }

        .div-td-content-exam {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            padding: 8px 6px;
            background: #fff;
            border: 1px solid #e8e8ea;
            display: none;
            min-height: 80px;
        }

        .div-td-content-exam i {
            width: 15px;
            height: 12px;
            background: url(/dist/img/more-icon.png);
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .div-td-content-exam .item {
            width: 100px;
            text-align: center;
            height: 30px;
            float: left;
            cursor: pointer;
            line-height: 30px;
        }

        .div-td-content-exam .item.active {
            color: rgba(228, 221, 221, 1);
        }
        .fj-tanzhongStyle .name {
            float: left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
        }
        .fj-tanzhongStyle .down {
            float:left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }
        .fj-tanzhongStyle .del {
            float:left;
            width: auto;
            height: 100%;
            line-height: 29px;
            position: relative;
            left: 0;
            top: 0;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<section class="content" id="app">
    <div class="div-td-content-exam">
        <div class="list" v-if="type==1">

            <div :class="item.select=='true'?'item active':'item'" v-for="item in companyList"
                 @click="selectItem(item)">{{item.name}}
            </div>
        </div>
        <div class="list" v-if="type==2">
            <div :class="item.select=='true'?'item active':'item'" v-for="item in departList" @click="selectItem(item)">
                {{item.departName}}
            </div>
        </div>
        <div class="list" v-if="type==3">
            <div :class="item.select=='true'?'item active':'item'" v-for="item in roleNameList"
                 @click="selectItem(item)">{{item.roleName}}
            </div>
        </div>
    </div>
    <table class="table-detail" border=0 cellSpacing=0 cellPadding=0 style="width: 100%; table-layout:auto">
        <tbody>
        <tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 100px">培训内容</td>
            <td class="td-value"><input v-model="info.description" type="text"
                                        v-if="pageType=='edit'&&info.state!=1"/>
                <span v-else>{{info.description}}</span>
            </td>

        </tr>

        <tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 100px">截止时间</td>
            <td class="td-value"><input type="text"
                                        v-model="info.endTime" placeholder="选择日期"
                                        @focus="showDatePicker($event)" v-if="pageType=='edit'&&info.state!=1"
                                        style="padding-left: 6px !important;text-indent: 0px;cursor: pointer"/>
                <span v-else>{{info.endTime}}</span>
        </tr>
        <!--<tr class="no-print">
            <td style="background-color: rgb(245, 243, 243); width: 100px">培训材料</td>
            <td>
                <div class="fj-tanzhongStyle" v-for="(attach,i) in fileList" v-if="attach.name!=''">
                    <b :class="fjStyle(attach.name)"></b>
                    <div class="name" :title="attach.name"
                         :title="attach.name">{{attach.name}}
                    </div>
                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                         v-on:click="download(attach.url,attach.name)">下载</a>
                    </div>
                </div>
            </td>

        </tr>-->
        <template v-if="houZui()">
            <tr class="no-print">
                <td style="background-color: rgb(245, 243, 243); width: 100px" colspan="2">培训材料</td>
            </tr>
            <tr class="no-print">
                <td colspan="2" style=" padding : 0px 5px  5px  5px !important;padding-left: 5px  !important;">
                    <div v-for="(attach,i) in fileList" v-if="attach.name!=''">
                        <!--<div v-if="houZui(attach.name)">-->
                        <div v-if="attach.name"
                             style="border: 1px solid #cbcbcd;float: left;margin-top: 5px;width: 100%;">
                            <img v-if="attach.name" :src="attach.url"
                                 @click="openImg(attach.url)" style="margin: 0;">
                        </div>
                        <div v-else
                             style="border: 1px solid #cbcbcd;float: left;margin-top: 5px;">
                            <img src="/dist/img/zwImg.png" style="margin: 0;">
                        </div>
                    </div>
                </td>
            </tr>
        </template>
        <template v-else>
            <tr class="no-print">
                <td style="background-color: rgb(245, 243, 243); width: 100px">培训材料</td>
                <td v-on:click="download(info.repaymentAttachUrl)">
                    <div class="fj-tanzhongStyle" v-for="(attach,i) in fileList" v-if="attach.name!=''">
                        <b :class="fjStyle(attach.name)"></b>
                        <div class="name" :title="attach.name"
                             :title="attach.name">{{attach.name}}
                        </div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                             v-on:click="download(attach.url,attach.name)">查看</a>
                        </div>
                    </div>
                </td>
                </td>
            </tr>
        </template>
        </tbody>
    </table>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px"
         v-if="passFlag!=1">
        <input type="button" value="进入测试" class="btn oaBtn btn-sm" v-if="passFlag!=1" @click="goDaTi()"/>
    </div>
    <!--<div style="width: 100%;height: 100%;">
        <iframe :src="'create.html?pageType=look&mainId=' +info.id+'&goback=0&ifr=true'"
                style="width: 100%;height: 100%;margin-top: 5px;border: 0px;" class="iframeH5"></iframe>
    </div>-->
</section>


<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="/page/apply/contract/Template.js?t=42e28def"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script>
    $(function () {
        $("body").on("click", ".changeValue", function (e) {
            var type = $(this).attr("attr-type");
            app.type = type;

            console.log(app.type)
            if (type == '1') {
                app.info.departNames = '';
                app.info.roleNames = '';
            }
            if (type == '2') {
                app.info.roleNames = '';
                app.selectDepart()
            }
            if (type == '3') {
                app.selectRoleName()
            }
            if ($(".div-td-content-exam").is(":hidden")) {
                el = $(this).parent().find(".td-value")
                $(".div-td-content-exam").css({
                    "width": el.outerWidth() + "px",
                    "left": el.offset().left,
                    "top": (el.offset().top + el.outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".div-td-content-exam").hide();
            }
        });
        $("body").on("click", ".div-td-content-exam", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-exam").hide();
        });
    });
</script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
            page: $.wyui.page.urlParams.page ? $.wyui.page.urlParams.page : '1',
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look',//页面类型
            isAdd: $.wyui.page.urlParams.isAdd ? $.wyui.page.urlParams.isAdd : 0,//页面类型
            type: "1",
            passFlag: $.wyui.page.urlParams.passFlag ? $.wyui.page.urlParams.passFlag : 1,//是否通过
            info: {
                title: "",
                id: this.id,
                description: "",
                endTime: "",
                companyNames: "",
                departNames: "",
                roleNames: "",
                companyIds: "",
                createUserId: getCurrentUser().id,
                createUserName: getCurrentUser().name,
                repaymentAttachName: "",
                repaymentAttachUrl: "",
                state: -1,
            },
            companyList: [],
            roleNameList: [],
            departList: [],
            companyNames: [],
            departNames: [],
            companyIds: [],
            roleNames: [],
            fileList: []
        },
        methods: {
            houZui: function (name) {
                var that = this;
                if (name) {
                    var type = name.substring(name.lastIndexOf('.') + 1);
                    console.log(type)
                    var houZui = 'jpg gif png bmp tif emf wmf ico raw';
                    if (houZui.indexOf(type) >= 0) {
                        return true;
                    } else {
                        return false;
                    }
                    return true;
                } else {
                    if (that.info.repaymentAttachUrl.indexOf('jpg') != -1 || that.info.repaymentAttachUrl.indexOf('gif') != -1 || that.info.repaymentAttachUrl.indexOf('png') != -1 || that.info.repaymentAttachUrl.indexOf('bmp') != -1 || that.info.repaymentAttachUrl.indexOf('tif') != -1 || that.info.repaymentAttachUrl.indexOf('emf') != -1 || that.info.repaymentAttachUrl.indexOf('ico') != -1 || that.info.repaymentAttachUrl.indexOf('raw') != -1 || that.info.repaymentAttachUrl.indexOf('wmf') != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
                return false;
            },
            selectItem: function (item) {
                var check;
                if (this.type == '1') {
                    check = "companyNames"
                    this.checkedOne("companyIds", item.id);
                    this.checkedOne(check, item.name);
                } else if (this.type == '2') {
                    check = "departNames"
                    this.checkedOne(check, item.departName);
                } else {
                    check = "roleNames"
                    this.checkedOne(check, item.roleName);
                }
                if (item.select == "true") {
                    item.select = "false"
                } else {
                    item.select = "true"
                }
                console.log(item)

            },
            changeName: function (string) {
                return string.replace(/,/g, "，")
            },
            selectDepart: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.exam.getDepartListByCompanyIds, {companyIds: that.info.companyIds}, function (data) {
                    console.log(data)

                    for (var i = 0; i < data.result.length; i++) {
                        if (that.info.departNames.indexOf(data.result[i].departName) != -1) {
                            data.result[i].select = "true";
                        } else {
                            data.result[i].select = "false"
                        }
                    }
                    if (that.info.departNames != "") {
                        that.departNames = that.info.departNames.split(",");
                    } else {
                        that.departNames = []
                    }
                    that.departList = data.result
                })
            },
            selectRoleName: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.exam.getRoleNameListByCompanyAndDepart, {
                    companyIds: that.info.companyIds,
                    departNames: that.info.departNames
                }, function (data) {
                    console.log(data);
                    for (var i = 0; i < data.result.length; i++) {
                        if (that.info.roleNames.indexOf(data.result[i].roleName) != -1) {
                            data.result[i].select = "true";
                        } else {
                            data.result[i].select = "false"
                        }
                    }
                    if (that.info.roleNames != "") {
                        that.roleNames = that.info.roleNames.split(",");
                    } else {
                        that.roleNames = []
                    }
                    that.roleNameList = data.result
                })
            },
            checkedOne: function (checkList, moduleKey) {
                var idIndex = this[checkList].indexOf(moduleKey)
                if (idIndex >= 0) {
                    this[checkList].splice(idIndex, 1)
                } else {
                    this[checkList].push(moduleKey)
                }
                var checkedString = "";
                if (this[checkList].length > 0) {
                    for (var i = 0; i < this[checkList].length; i++) {
                        if (this[checkList][i] != "") {
                            checkedString += this[checkList][i] + ",";
                        }
                    }
                    this.info[checkList] = checkedString.substring(0, checkedString.length - 1);
                } else {
                    this.info[checkList] = ""
                }
                console.log(this.info)
            },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            deleteFile: function (i) {
                this.contract.attaches.splice(i, 1);
            },
            download: function (attachUrl, fileName) {
                var sUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + attachUrl;
                var fileType = fileName.substring(fileName.lastIndexOf("."));
                switch (fileType) {
                    case ".png":
                    case ".jpeg":
                    case ".jpg":
                    case ".pdf":
                        downloadFilePDF(attachUrl, fileName);
                        break;
                    case ".ppt":
                    case ".pptx":
                    case ".doc":
                    case ".docx":
                    case ".xls":
                    case ".xlsx":
                        top.addTabs({
                            id: 'newAttachExam',
                            title: fileName,
                            close: true,
                            url: sUrl,
                            urlType: "news"
                        });
                        break;
                    default:
                        downloadFilePDF(attachUrl, fileName);
                        break;
                }
                return false;
            },

            showDatePicker: function (e, item, type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.info.endTime = dp.cal.getNewDateStr();
                        return true;
                    },
                    dateFmt: 'yyyy-MM-dd HH:mm:ss'
                });
                $(e.target).blur();
            },
            goDaTi: function () {
                var that = this;
                top.closeTabByPageId("daTi");
                top.addTabs({
                    id: 'daTi',
                    title: '答题',
                    close: true,
                    url: 'exam/daTi.html?id=' + that.info.id,
                });
            },
            init: function () {
                var that = this
                setTimeout(function () {
                    $(".fj").each(function () {
                        var demo = $(this);
                        var name = demo.attr("id");//signature
                        console.log(name)
                        var uploader = WebUploader.create({
                            // 选完文件后，是否自动上传。
                            auto: true,
                            // swf文件路径
                            swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                            // 文件接收服务端。
                            server: server.fjIp + "/attach/uploadFile.json",
                            // 选择文件的按钮。可选。
                            accept: {
                                title: 'Files',
                                extensions: 'pdf',
                                mimeTypes: 'application/pdf'
                            },
                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                            pick: '#' + demo.attr("id"),
                            duplicate: true
                        });
                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {
                            var $li = $('#' + file.id),
                                $percent = $li.find('.progress span');
                            // 避免重复创建
                            if (!$percent.length) {
                                $percent = $('<p class="progress"><span></span></p>')
                                    .appendTo($li)
                                    .find('span');
                            }
                            $percent.css('width', percentage * 100 + '%');
                        });
                        uploader.on("uploadStart", function () {
                            $("#progress").show();
                        });
                        uploader.on("uploadComplete", function () {
                            $("#progress").hide();
                        });
                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file, response) {
                            that.info.repaymentAttachName = response.name,
                                that.info.repaymentAttachUrl = response.url,
                                $("#peiXun").hide();
                        });
                        // 文件上传失败，显示上传出错。
                        uploader.on('uploadError', function (file) {
                            alert("上传失败！");
                        });
                    });
                }, 500);

            },
            see: function () {
                var that = this;
                top.$.dialog({
                    content: 'url:/page/exam/create.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0,
                    // title: '预览详情',
                    title: '',
                    width: 904,
                    height: 570,
                    max: true,
                    min: true,
                    lock: true,
                });
            },
            saveMain: function (pageType, goback, save) {
                //预览 -1 look
                //编辑 0 edit
                //发布 1
                var that = this;
                delete that.info.createTime;
                if (save) {
                    that.info.state = 1;
                }
                $.wyui.postMethod(urlConfig.exam.saveExamMain, trimRN(that.info), function (data) {
                    that.info.id = data.id;
                    console.log(that.info.id)
                    //pageType
                    if (!save && pageType && pageType != '') {
                        top.addTabs({
                            id: 'xzpxst',
                            title: '新增培训试题',
                            close: true,
                            url: 'exam/create.html?pageType=' + pageType + '&mainId=' + that.info.id + "&goback=" + goback
                        });
                    }
                    if (save && save == 1) {
                        top.refreshTabByName("培训管理", "no");
                        top.closeTabByPageId("xzpx");
                        top.closeTabByPageId("xzpxst");
                    }
                })
            },
        },
        mounted: function () {
            var that = this;
            that.init();
            var id = $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '';
            that.info.id = id;
            that.pageType = 'look';//页面类型
            that.isAdd = 0;//页面类型


            //修改，掉借口
            $.wyui.postMethod(urlConfig.exam.getExamMainById, {id: that.info.id}, function (data) {
                that.info = data.result;
                var repaymentAttachNames = that.info.repaymentAttachName;
                var repaymentAttachUrls = that.info.repaymentAttachUrl;
                var repaymentAttachNameList = repaymentAttachNames.split(',');
                var repaymentAttachUrlList = repaymentAttachUrls.split(',');
                for (var i = 0; i < repaymentAttachUrlList.length; i++) {
                    var attach = {
                        name: repaymentAttachNameList[i],
                        url: repaymentAttachUrlList[i],
                    }
                    that.fileList.push(attach);
                }


                console.log(that.info)
            })


        }
    })
</script>
</body>
</html>